<template>
  <div class="header-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">头部设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionModel.DRCHeaderConfig.headHeight"
        />
      </el-form-item>
      <el-form-item label="背景颜色">
        <el-color-picker v-model="optionModel.DRCHeaderConfig.backgroundColor" size="small" show-alpha
                         :predefine="predefineColors"/>
      </el-form-item>
      <el-form-item label="字体颜色">
        <el-color-picker v-model="optionModel.DRCHeaderConfig.fontColor" size="small" show-alpha :predefine="predefineColors"/>
      </el-form-item>
    </div>
    <!--科室设置-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">科室设置</el-divider>
      </div>
      <el-form-item label="科室名称">
        <el-input
            :min="0"
            size="small"
            class="hide-spin-button"
            v-model="optionModel.DRCHeaderConfig.deptName"
        />
      </el-form-item>
    </div>
    <!--时间设置-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">时间设置</el-divider>
      </div>
      <el-form-item label="时间格式">
        <el-select v-model="optionModel.DRCHeaderConfig.timeValue" placeholder="请选择">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </div>
  </div>
</template>

<script>
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "DRCHeaderConfig-editor",
  componentName: "DRCHeaderConfig-editor",
  mixins: [],

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      constantDic: constantDic,
      predefineColors: types['predefineColors'],
      options: [{
        value: 'YYYY/MM/DD',
        label: 'YYYY/MM/DD'
      }, {
        value: 'YYYY-MM-DD',
        label: 'YYYY-MM-DD'
      }, {
        value: 'YYYY年MM月DD日',
        label: 'YYYY年MM月DD日'
      },{
        value: 'MM/DD',
        label: 'MM/DD'
      }, {
        value: 'MM-DD',
        label: 'MM-DD'
      }, {
        value: 'MM月DD日',
        label: 'MM月DD日'
      }],
    }
  },
}
</script>